<%@ include file="../common/header.jsp" %>
<div class="content">
    <%@ include file="../common/top_nav.jsp" %>

    <div class="container mt-4">
        <h2>社区服务请求管理</h2>

        <!-- 新增按钮 -->
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#serviceModal"
                onclick="prepareAddService()">新增服务请求</button>

        <!-- 服务请求列表 -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>住户ID</th>
                <th>服务类型</th>
                <th>请求描述</th>
                <th>状态</th>
                <th>处理时间</th>
                <th>处理人</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="s" items="${list}">
                <tr>
                    <td>${s.residentId}</td>
                    <td>${s.serviceType}</td>
                    <td>${s.description}</td>
                    <td>${s.status}</td>
                    <td>${s.resolveTime != null ? s.resolveTime : '未处理'}</td>
                    <td>${s.resolvedBy != null ? s.resolvedBy : '未处理'}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#serviceModal"
                                onclick="prepareEditService(${s.id})">编辑</button>
                        <a href="<c:url value='/community/delete/${s.id}'/>" class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="serviceForm" action="<c:url value='/community/add'/>" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="serviceModalLabel">服务请求</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id" name="id"/>

                    <div class="mb-3">
                        <label for="residentId" class="form-label">住户ID</label>
                        <input type="number" class="form-control" id="residentId" name="residentId" required>
                    </div>

                    <div class="mb-3">
                        <label for="serviceType" class="form-label">服务类型</label>
                        <select class="form-select" id="serviceType" name="serviceType" required>
                            <option value="">请选择</option>
                            <option value="报修">报修</option>
                            <option value="投诉">投诉</option>
                            <option value="建议">建议</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">描述</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label">状态</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="待处理">待处理</option>
                            <option value="处理中">处理中</option>
                            <option value="已处理">已处理</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="resolveTime" class="form-label">处理完成时间</label>
                        <input type="date" class="form-control" id="resolveTime" name="resolveTime">
                    </div>

                    <div class="mb-3">
                        <label for="resolvedBy" class="form-label">处理人</label>
                        <input type="text" class="form-control" id="resolvedBy" name="resolvedBy">
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">保存</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<%@ include file="../common/footer.jsp" %>
<script>
    function prepareAddService() {
        document.getElementById("serviceModalLabel").innerText = "新增服务请求";
        document.getElementById("serviceForm").action = "<c:url value='/community/add'/>";
        document.getElementById("id").value = "";
        document.getElementById("residentId").value = "";
        document.getElementById("serviceType").value = "";
        document.getElementById("description").value = "";
        document.getElementById("status").value = "待处理";
        document.getElementById("resolveTime").value = "";
        document.getElementById("resolvedBy").value = "";
    }

    function prepareEditService(id) {
        fetch("<c:url value='/community/get/'/>" + id, {
            headers: { "Accept": "application/json" }
        })
            .then(res => res.json())
            .then(data => {
                document.getElementById("serviceModalLabel").innerText = "编辑服务请求";
                document.getElementById("serviceForm").action = "<c:url value='/community/update'/>";
                document.getElementById("id").value = data.id;
                document.getElementById("residentId").value = data.residentId;
                document.getElementById("serviceType").value = data.serviceType;
                document.getElementById("description").value = data.description;
                document.getElementById("status").value = data.status;
                document.getElementById("resolveTime").value = data.resolveTime || "";
                document.getElementById("resolvedBy").value = data.resolvedBy || "";
            })
            .catch(err => {
                console.error("获取失败：", err);
                alert("加载服务请求数据失败！");
            });
    }
</script>
